import React, { useEffect, useState } from 'react'
import { IndexBar, List, NavBar } from 'antd-mobile'
import { connect, useHistory } from 'umi';

function City(props: any) {
    const [group, setGroup] = useState([])
    useEffect(() => {
        fetch("https://m.maizuo.com/gateway?k=2274105",
            {
                headers: {
                    'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16722220591298527527370753","bc":"110100"}',
                    'X-Host': 'mall.film-ticket.city.list'
                }
            })
            .then(res => res.json())
            .then(
                res => {
                    const cities = res.data.cities;
                    setGroup(filterCity(cities));

                }
            )

        return () => {

        }
    }, []);

    const filterCity = (cities: any) => {
        const letterArr = [];
        const allDataArr = [];

        for (var i = 65; i < 91; i++) {
            letterArr.push(String.fromCharCode(i))
        }
        console.log(letterArr);
        for (var m in letterArr) {
            var itemsData: any = cities.filter((item: any) => (
                item.pinyin.substring(0, 1).toUpperCase() === letterArr[m]
            ));
            itemsData.length && allDataArr.push({
                title: letterArr[m],
                items: cities.filter((item: any) => (
                    item.pinyin.substring(0, 1).toUpperCase() === letterArr[m]
                ))
            });
        };
        console.log("组装后的数据：", allDataArr);
        return allDataArr;
    }

    const history = useHistory();
    const changeItem = (item: any) => {
        console.log(item.name, item.cityId)
        //修改store 中state的状态数据
        props.dispatch({
            type: "city/changeCity",
            payload: {
                cityName: item.name,
                cityId: item.cityId
            }
        })
        history.push("/cinames")
    }
    const back = () => {
        history.goBack();
    };

    return (
        <div style={{ width: "100%" }}>
            <NavBar back="关闭" onBack={back} >
                选择城市
            </NavBar>

            <div style={{ height: window.innerHeight }}>
                <IndexBar>
                    {group.map(group => {
                        const { title, items } = group
                        return (
                            <IndexBar.Panel
                                index={title}
                                title={title}
                                key={title}
                            >
                                <List>
                                    {items.map((item: any, index: any) => (
                                        <List.Item
                                            key={index}
                                            onClick={() => { changeItem(item) }}
                                        >{item.name}</List.Item>
                                    ))}
                                </List>
                            </IndexBar.Panel>
                        )
                    })}
                </IndexBar>
            </div>
        </div>
    )
}


export default connect(() => ({}))(City)